.loading-block {
    position: absolute;
    width: 100%;
    height: 100%;

    background-color: rgba(255, 255, 255, 0.8); //遮罩颜色
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ababab;
    font-size: 24rpx;
    text-align: center;

    .img {
        animation: changeright 2s linear infinite;
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 16rpx;
    }
}

// loading动画
@-webkit-keyframes changeright {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.modelItem {
    text-align: center;
}

.msg {
    width: 28rpx;
    height: 28rpx;
    margin-top: 10rpx;
}


.tipsContent {
    font-size: 26rpx !important;
    color: #fff !important;
    font-weight: normal !important;

    view {
        margin-bottom: 10rpx;

        text {
            display: inline-block;
            width: 180rpx;
        }
    }

    text:nth-of-type(1) {
        font-weight: 500;
    }
}

.card {
    background-color: #fff;
    width: calc(100% - 80rpx);
    padding: 20rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    border-radius: 8rpx;
    position: relative;

    .title {
        display: flex;
        height: 56rpx;

        .title_L {
            flex: 1;
            font-size: 32rpx;
            border-left: 4rpx solid #ffffff;
            color: #333333;
            font-weight: bold;
            // margin-left: -19rpx;
            display: flex;
            // justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;

            text:nth-of-type(2) {
                font-weight: 400;
                font-size: 26rpx;
                color: #666666;
            }
        }

        .title_R {
            flex: 0 0 80rpx;
            text-align: right;
            font-size: 26rpx;
            color: #999999;
            margin-right: 10rpx;

            text {
                display: inline-block;
                margin-bottom: 5rpx;
                margin-left: 8rpx;
                width: 8rpx;
                height: 8rpx;
                border-left: 2rpx #999 solid;
                border-top: 2rpx #999 solid;
                transform: rotate(-225deg);
            }
        }



        .titleTime {
            font-size: 24rpx;
            font-weight: 400;
            color: #666666;
            padding: 11rpx 15rpx;
            border: 2rpx solid #d5d5d5;
            border-radius: 4rpx;
        }
    }

    .goBlack {
        display: flex;
        justify-content: space-between;
        height: 40rpx;

        .left {
            display: flex;

            view:nth-of-type(1) {
                color: #0091FF;

                text {
                    display: inline-block;
                    margin-bottom: 5rpx;
                    margin-right: 4rpx;
                    width: 8rpx;
                    height: 8rpx;
                    border-right: 2rpx #0091FF solid;
                    border-bottom: 2rpx #0091FF solid;
                    transform: rotate(-225deg);
                }
            }

            view:nth-of-type(2) {
                text {
                    display: inline-block;
                    margin: 0 10rpx;
                    color: #999999;
                }
            }
        }

        .right {
            margin-left: auto;
            display: flex;
            align-items: center;

            color: #666666;
            font-size: 26rpx;

            image {
                width: 32rpx;
                height: 32rpx;
            }
        }
    }

    .charts {
        width: 100%;
        display: flex;
        position: relative;
        align-items: center;
        justify-content: space-around;


        .empty {
            width: 320rpx;
            margin: 0 auto;
            display: flex;
            align-items: center;

            image {
                width: 64rpx;
                height: 64rpx;
            }

            view {
                text-align: center;
            }
        }

        .chartsContent {
            .ringTitle {
                width: 200rpx;
                height: 200rpx;
                border-radius: 50%;
                position: absolute;
                top: 80rpx;
                left: 80rpx;
                background: #fff;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }

        .ring {
            width: 320rpx;
            height: 320rpx;
            padding: 0;
            text-align: center;
            display: flex;
            align-items: center;
            font-size: 30rpx;
            color: #999;
            justify-content: center;
            // margin: 0 auto;
            // background-color: #ccc;
        }

        .line-chart {
            height: 800rpx;
            padding: 0;
            width: 100%;
        }

        .data-lable {
            width: calc(100% - 320rpx);
            padding-right: 20rpx;

            &-info {
                width: 100%;
                display: flex;
                align-items: center;

                &-item {
                    flex: 1;
                    text-align: center;
                    font-size: 26rpx;
                    color: #999999;
                    line-height: 42rpx;

                    .num {
                        font-size: 34rpx;
                        font-weight: bold;
                        color: #333;

                        text {
                            font-size: 30rpx;
                        }
                    }

                    .red {
                        color: #c01414;
                    }

                    .name {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        text-align: center;
                        justify-content: center;

                        .color {
                            // background-color: #0091FF;
                            width: 16rpx;
                            height: 16rpx;
                            border-radius: 50%;
                            margin-right: 12rpx;
                        }

                        .text {
                            text-align: center;
                            flex: 1;
                        }
                    }
                }

                &-item:nth-child(1) {
                    padding-right: 16rpx;
                    flex: none;
                }

                .line {
                    width: 2rpx;
                    height: 60rpx;
                    background-color: #eeeeee;
                }
            }

            &-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 26rpx;
                margin: 16rpx 0;
                color: #666666;

                .color {
                    // background-color: #0091FF;
                    width: 16rpx;
                    height: 16rpx;
                    border-radius: 50%;
                    margin-right: 12rpx;
                }

                .name {
                    width: 160rpx;
                    margin-right: auto;
                    overflow: hidden;
                    text-overflow: ellipsis; //文本溢出显示省略号
                    white-space: nowrap; //文本不会换行
                }

                .num {
                    width: 80rpx;
                    text-align: right;
                    margin-right: 10rpx;

                }

                .eleTotal {
                    width: 80rpx;
                    text-align: right;
                }
            }
        }


        .tooltips {
            position: absolute;
            top: 70rpx;
            right: 20rpx;
            background: #ffffff;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
            z-index: 97 !important;
            display: flex;
            flex-direction: column;
            width: 320rpx;
            padding-bottom: 16rpx;

            .tool_name {
                font-size: 22rpx;
                font-weight: 400;
                color: #333333;
                margin: 16rpx 0 16rpx 16rpx;
            }

            .tool_data {
                font-size: 22rpx;
                font-weight: 400;
                color: #333333;
                display: flex;
                margin: 0 16rpx;
                align-items: center;

                view:nth-of-type(1) {
                    width: 16rpx;
                    height: 16rpx;
                    border-radius: 50%;
                }

                view:nth-of-type(2) {
                    // width: 120rpx;
                    flex: 1;
                    margin-left: 10rpx;
                }

                view:nth-of-type(3) {}
            }

            .tool_see {
                border-top: 2rpx solid #e9e9e9;
                margin-top: 16rpx;
                padding-top: 16rpx;
                text-align: center;
                color: #0091FF;

                image {
                    width: 24rpx;
                    height: 24rpx;
                    // vertical-align: middle;
                }
            }
        }
    }


    .card-time {
        display: flex;
        margin: 20px 0;

        .time_L {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-right: 2rpx #eee solid;

            view:nth-of-type(1) {
                color: #333333;
                font-size: 36rpx;
                font-weight: 600;
            }
        }

        .time_R {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            view:nth-of-type(1) {
                color: #333333;
                font-size: 36rpx;
                font-weight: 600;
            }
        }
    }

    .info-view {
        width: 100%;
        height: 184rpx;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        background: url('https://000000-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20250804/72d22b8d5946f90a2c1f70aa381a2dfb.png') no-repeat left top;
        background-size: 100% 100%;


        &-item {
            flex: 1;
            text-align: center;
            font-size: 26rpx;
            color: #999999;
            line-height: 42rpx;

            .num {
                font-size: 54rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 12rpx;

                text {
                    font-size: 26rpx;
                    font-weight: normal;
                    color: #666;
                    margin-left: 6rpx;
                }
            }

            .orange {
                color: #FA6400;
            }

            .grey {
                color: #999999;
            }

            .download {
                display: flex;
                align-items: center;
                justify-content: center;

                color: #666666;
                font-size: 26rpx;

                image {
                    width: 32rpx;
                    height: 32rpx;
                }
            }
        }

        &-line {
            width: 2rpx;
            height: 60rpx;
            background-color: #eeeeee;
        }

    }

    .descText {
        padding-left: 10rpx;
        font-size: 24rpx;
        color: #999;
    }
}

.cardSty {
    position: sticky;
    top: 100rpx;
    left: 0;
    right: 0;
    z-index: 98;
}

.filter {
    width: 100%;

    &-item {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        padding-top: 20rpx;

        &-label {
            width: 20%;
            color: #666666;
        }

        &-content {
            width: 80%;
            display: flex;

            .tag {
                width: 166rpx;
                text-align: center;
                // flex: 1;
                background: #f3f6f8;
                border-radius: 8rpx;
                height: 48rpx;
                line-height: 47rpx;
                font-size: 24rpx;
                color: #333;
                border: 2rpx solid #f3f6f8;
                font-weight: normal;
                transition: 0.3s all;
            }

            .tag:nth-child(2) {
                margin: 0 16rpx;
            }

            .date {
                flex: 1;
                color: #999999;
            }

            .act {
                border: 2rpx solid #0091ff;
                background-color: #eef8ff;
                color: #0091ff;
            }
        }
    }
}

.data-types {
    width: 100%;
    // padding-top: 18rpx;
    padding-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}

.tag-block {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;

    &-item {
        color: #666666;
        background: #f3f6f8;
        font-size: 24rpx;
        margin-right: 20rpx;
        border-radius: 2rem;
        padding: 3rpx 20rpx;
    }

    .act {
        color: #0091ff;
        background: #dcf0ff;
    }
}